<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>事件监听</title>
      <style>
         div{
            width: 200px;
            height: 200px;
            background-color: #ade5d0;
         }
      </style>
   </head>
   <body>
      <button>按钮</button>
      <div class="box">
         <p>我是一个盒子</p>
      </div>
      <!--<input type="text" name="aa" id="bbb">-->
      <script>
         let btn = document.querySelector('button')
         btn.addEventListener('click', function (){
            alert('点击了')
         })
         // let input = document.querySelector('input')
         // input.addEventListener('focus', function (){
         //    alert('获得焦点')
         // })
         let box = document.querySelector('.box')
         box.addEventListener('mouseenter', function (){
            console.log('鼠标进入')
            box.style.backgroundColor = 'pink'
         })
         box.addEventListener('mouseleave', function (){
            // box.style.backgroundColor = 'blue'
            // box.removeEventListener('mouseenter', arguments.callee)
            console.log('鼠标离开')
         })
      </script>
   </body>
</html>